<template>
  <div class="odu_div">
    <h2>设备{{ selectNode }}创建odu连接</h2>
    <!--    <el-button @click="getInfo">点击接收</el-button>-->
    <el-form :model="odu" label-width="180px" class="eos_form">
      <el-tabs tab-position="left" >
        <el-tab-pane label="基础信息">基础信息
          <div style="border: 2px #d22020">
            <el-form-item label="交叉方式">
              <el-select v-model="xcType" autocomplete="off" placeholder="请选择交叉连接方式">
                <el-option label="NNI-NNI" value="1"></el-option>
                <el-option label="UNI-NNI" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="连接名称">
              <el-input v-model="odu['create-odu-connection'].input['layer-protocol-name']"
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="业务类型">
              <el-input v-model="odu['create-odu-connection'].input['service-type']" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="连接层协议名称">
              <el-input v-model="odu['create-odu-connection'].input['layer-protocol-name']"
                        autocomplete="off"></el-input>
            </el-form-item>
          </div>
        </el-tab-pane>
        <el-tab-pane label="请求带宽">请求带宽
          <div>
            <el-form-item label="TDM">
              <el-input type="number" v-model="odu['create-odu-connection'].input['requested-capacity']['total-size']"
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="cbs">
              <el-input type="number" v-model="odu['create-odu-connection'].input['requested-capacity'].cbs"
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="cir">
              <el-input type="number" v-model="odu['create-odu-connection'].input['requested-capacity'].cir"
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="ebs">
              <el-input v-model="odu['create-odu-connection'].input['requested-capacity'].ebs"
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="eir">
              <el-input v-model="odu['create-odu-connection'].input['requested-capacity'].eir"
                        autocomplete="off"></el-input>
            </el-form-item>
          </div>
        </el-tab-pane>

        <el-tab-pane label="NNI-1">NNI-1
          <el-form-item label="端口名称">
            <el-input v-model="odu['create-odu-connection'].input['primary-nni']['nni-ptp-name']" autocomplete="off"
                      placeholder="线路侧物理端口名称"></el-input>
          </el-form-item>
          <el-form-item label="时隙信息">
            <el-input v-model="odu['create-odu-connection'].input['primary-nni']['nni-ts-detail']"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="适配类型">
            <el-select v-model="odu['create-odu-connection'].input['primary-nni']['adaptation-type']"
                       placeholder="请选择适配类型">
              <el-option
                  v-for="(i,index) in adaptationType"
                  :key="index"
                  :value="i">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="交换能力">
            <el-select v-model="odu['create-odu-connection'].input['secondary-nni']['switch-capability']" clearable
                       placeholder="请选择交换能力">
              <el-option
                  v-for="(i,index) in switchType"
                  :key="index"
                  :value="i">
              </el-option>
            </el-select>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="NNI-2">NNI-2
          <el-form-item label="端口名称">
            <el-input v-model="odu['create-odu-connection'].input['secondary-nni']['nni-ptp-name']" autocomplete="off"
                      placeholder="线路侧物理端口名称"></el-input>
          </el-form-item>
          <el-form-item label="时隙信息">
            <el-input v-model="odu['create-odu-connection'].input['secondary-nni']['nni-ts-detail']"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="适配类型">
            <el-select v-model="odu['create-odu-connection'].input['secondary-nni']['adaptation-type']"
                       placeholder="请选择适配类型">
              <el-option
                  v-for="(i,index) in adaptationType"
                  :key="index"
                  :value="i">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="交换能力">
            <el-select v-model="odu['create-odu-connection'].input['secondary-nni']['switch-capability']" clearable
                       placeholder="请选择交换能力">
              <el-option
                  v-for="(i,index) in switchType"
                  :key="index"
                  :value="i">
              </el-option>
            </el-select>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="客户侧OTN接口属性">客户侧OTN接口属性
          <el-form-item label="端口名称">
            <el-input v-model="odu['create-odu-connection'].input['client-side-nni']['nni-ptp-name']" clearable
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="时隙信息">
            <el-input v-model="odu['create-odu-connection'].input['client-side-nni']['nni-ts-detail']" clearable
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="适配类型">
            <el-input v-model="odu['create-odu-connection'].input['client-side-nni']['adaptation-type']" clearable
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="净荷类型">
            <el-select v-model="odu['create-odu-connection'].input['client-side-nni']['client-signal-type']" clearable
                       placeholder="请选择净荷类型">
              <el-option
                  v-for="(i,index) in clientSignalType"
                  :key="index"
                  :value="i">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="交换能力">
            <el-input v-model="odu['create-odu-connection'].input['client-side-nni']['switch-capability']" clearable
                      autocomplete="off"></el-input>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
      <el-form-item>
        <el-image
            style="width: 20px; height: 25px;"
            :src="require('@/assets/union_rule_font.jpg')"
            :preview-src-list="[require('@/assets/union/ODU交叉连接配置.png')]">
        </el-image>
        <el-button type="primary" @click="createOduConnection">确认</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "ODU",
  data() {
    return {
      selectNode: '',
      nodeName: '',
      xcType: '',
      //适配类型 默认使用GFP-F
      adaptationType: ['CBR_AMP', 'CBR_BMP', 'GFP-T', 'GFP-F', 'NULL', 'PRBS', 'CBRx', 'CBRX_GMP', 'ODUij', 'ODUj21', 'ODUk ', 'unknown'],
      //交换能力
      switchType: ['ODU0', 'ODU1', 'ODU2', 'ODU2e', 'ODU3', 'ODU4', 'ODUflex-GFP', 'ODUflex-CBR'],
      //净荷类型
      clientSignalType: ['ODU0', 'ODU1', 'ODU2', 'ODU4', 'STM-1', 'STM-4', 'STM-16', 'STM-64', 'GE', '10GE-LAN'],
      odu: {
        "create-odu-connection": {
          "input": {
            "client-side-nni": {
              "nni-ptp-name": "s",
              "nni-ts-detail": "s",
              "adaptation-type": "GFP-F",
              "client-signal-type": "i",
              "switch-capability": "i"
            },
            "primary-nni": {
              "nni-ptp-name": "s",
              "nni-ts-detail": "s",
              "adaptation-type": "GFP-F",
              "client-signal-type": "i",
              "switch-capability": "i"
            },
            "secondary-nni": {
              "nni-ptp-name": "s",
              "nni-ts-detail": "s",
              "adaptation-type": "GFP-F",
              "client-signal-type": "i",
              "switch-capability": "i"
            },
            "connection-name": "s",
            "service-type": "ODU",
            "layer-protocol-name": "i",
            "requested-capacity": {
              "total-size": "1",
              "cbs": "1",
              "cir": "1",
              "pbs": "1",
              "pir": "1"
            }
          }
        }
      },
    }
  },
  methods: {
    createOduConnection() {
      if (this.selectNode !== '') {
        axios.post("/node/" + this.selectNode + "/create_connection/odu", {context: JSON.stringify(this.odu)}).then(
            response => {
              console.log("创建odu成功", response.data);
              this.$message.success("创建odu成功" + response.data);
            },
            error => {
              console.log("错误：", error.message);
              this.$message.error(error.message);
            }
        )
      }else {
        this.$message.warning('请选择节点后再操作');
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  mounted() {
    this.$bus.$on('node-name', (data) => {
      console.log("收到的信息为： ", data)
      this.selectNode = data;
    })

  }
}
</script>

<style scoped>
.odu_div {
  width: 600px;
  height: auto;
}

</style>